<template>
  <div id="chatApp">
    <ChatHeader />
    <main>
      <div class="sidebar">
        <div class="module active">
          <div class="module-header">
            <div class="module-icon">
              <i class="fas fa-comments"></i>
            </div>
            <h3>智能对话</h3>
          </div>
          <p>与AI助手进行自然语言对话，获取信息与帮助</p>
        </div>
      </div>

      <div class="content">
        <MessageList
          :messages="messages"
          :is-typing="isTyping"
          ref="messageList"
        />
        <div class="input-area">
          <input type="text" placeholder="输入您的问题或指令..." v-model="userInput" @keyup.enter="sendMessage">
          <button @click="sendMessage"><i class="fas fa-paper-plane"></i> 发送</button>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import ChatHeader from '@/components/ai/ChatHeader.vue'
import MessageList from '@/components/ai/MessageList.vue'

export default {
  name: 'AIChat',
  components: {
    ChatHeader,
    MessageList
  },
  data() {
    return {
      userInput: '',
      isTyping: false,
      messages: [
        { type: 'ai', content: '您好！我是AI智能助手，有什么可以帮您的吗？', isCode: false },
      ],
    }
  },
  methods: {
    // 模拟API调用
    aiChat(userInput) {
      return new Promise(resolve => {
        // setTimeout(() => {
          // 模拟不同的响应
          const randomResponse = fetch(`http://localhost:9912/ai/chat?prompt=${userInput}`)
            .then(response =>
              response.text()
            );
          resolve(randomResponse);
        // }, 2000);
      });
    },

    async sendMessage() {
      if (!this.userInput.trim()) return;

      // 添加用户消息
      this.messages.push({
        type: 'user',
        content: this.userInput,
        isCode: false
      });

      const userInput = this.userInput;
      this.userInput = '';

      // 显示AI正在输入
      this.isTyping = true;
      try {
        // 调用AI聊天接口
        const response = await this.aiChat(userInput);


        // 添加AI响应
        this.messages.push({
          type: 'ai',
          content: MessageList.methods.formatCode(response),
          isCode: false
        });
      } catch (error) {
        console.error('Error:', error);
        this.messages.push({
          type: 'ai',
          content: '抱歉，发生了错误：' + error.message,
          isCode: false
        });
      } finally {
        this.isTyping = false;
      }
    },

    scrollToBottom() {
      this.$nextTick(() => {
        this.$refs.messageList.scrollToBottom();
      });
    }
  },
  watch: {
    messages() {
      this.scrollToBottom();
    }
  }
}
</script>

<style scoped>
/* 这里只包含组件特有的样式，通用样式可以放在外部CSS文件中 */
#chatApp {
  width: 100%;
  max-width: 1200px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 89vh;
}

main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: 280px;
  background: #f8f9fa;
  padding: 25px 15px;
  border-right: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.module {
  background: white;
  border-radius: 15px;
  padding: 18px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.module:hover {
  transform: translateY(-5px);
  border-color: #3494E6;
}

.module.active {
  border-color: #3494E6;
  background: #e3f2fd;
}

.module-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.module-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(45deg, #3494E6, #EC6EAD);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.module h3 {
  font-size: 1.1rem;
  color: #2c3e50;
}

.module p {
  font-size: 0.9rem;
  color: #7f8c8d;
  line-height: 1.5;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.input-area {
  padding: 20px;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 15px;
  background: white;
}

input {
  flex: 1;
  padding: 15px 20px;
  border: 2px solid #e9ecef;
  border-radius: 50px;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
}

input:focus {
  border-color: #3494E6;
}

button {
  background: linear-gradient(90deg, #3494E6, #EC6EAD);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 0 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  main {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e9ecef;
    padding: 15px;
  }
}
</style>
